import Vue from 'vue'
import Vuex from 'vuex'
import { loginAPI } from '@/api'
Vue.use(Vuex)

export default new Vuex.Store({

  state: {
    token: localStorage.getItem('token') || '',
    refresh_token: localStorage.getItem('refresh_token') || ''
  },
  mutations: {
    // 将token存储到本地
    // 本地存储包括面试题 localStorage sessionStorage Cookie indexDB
    // 他们的共同点都是用来浏览器中存储数据 存到硬盘vuex存到内存
    // 他们都只能存放字符串 如果想要存放对象 通过JSON.stringify进行转换
    // localStorage.setItem('token', JSON.stringify({a:1}))
    // localStorage将数据存放在本地，可以跨页面访问 5M
    // sessionStorage 临时会话存储 如果当前页面关闭存储清空 如果一个网站开了多个标签页可以跨标签页访问 5M
    // Cookie 浏览器存储的一种 cookie 大小4K左右 （不同的浏览器cookie大小也不相同）
    // Cookie会随着请求一起发送到后端，里面通常存放用户信息、用户配置、用户token
    setToken (state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    setRefreshToken (state, refreshToken) {
      state.refresh_token = refreshToken
      localStorage.setItem('refresh_token', refreshToken)
    }
  },
  actions: {
    // 为什么使用vuex实现登录功能
    // 正常的企业开发场景会将登录，获取用户信息等功能放在vuex的actions中进行调用
    // token多处多次使用 是一个公共的状态  vuex更适合公共状态管理
    // 由于vuex不能实现刷新保存所以还需要将token数据存放在本地一份（localSorage,cookie）

    // vuex实现登陆并保存token的步骤
    // 1.在vuex中的state里定义变量
    // 2.在mutations中定义修改state数据的方法
    // 3.需要在vuex中引入接口（登陆接口）
    // 4.在actions中实现接口的调用，同时调用vuex中的mutatios中的方法
    // 实现将接口的返回值存放在vuex的state中
    // 5.在需要调用登陆接口的文件中通过mapActions
    // 或者this.$store.dispatch('asyncLoginAction','传入的接口所需参数')

    async asyncLoginAction (store, val) {
      try {
        const res = await loginAPI(val)
        const { token, refresh_token } = res.data.data
        store.commit('setToken', token)
        store.commit('setRefreshToken', refresh_token)
        return Promise.resolve(res) // 返回成功的Promise对象
      } catch (err) {
        return Promise.reject(err) // 返回失败的Promise对象
      }
    }
  }
})
